<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>充电管理系统</title>
    <link rel="stylesheet" href="style.css">
    <link rel="icon" href="image/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* 登录页面特定样式补充 */
        .server-info {
            position: absolute;
            top: 20px;
            right: 20px;
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(5px);
            padding: 12px 20px;
            border-radius: 10px;
            color: white;
            font-size: 0.9rem;
            z-index: 20;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }
        
        .server-info .ip {
            font-weight: bold;
            color: #4ecdc4;
        }
        
        /* 新增错误样式 */
        .error {
            border-color: #ff6b6b !important;
        }
        
        .shake {
            animation: shake 0.5s;
        }
        
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
            20%, 40%, 60%, 80% { transform: translateX(5px); }
        }
        
        /* 输入框激活样式 */
        .input-group.active {
            border-color: #4ecdc4;
            box-shadow: 0 0 0 3px rgba(78, 205, 196, 0.2);
        }
        
        /* 圆角输入框样式 */
        .input-group {
            position: relative;
            margin-bottom: 20px;
            border: 1px solid #ddd;
            border-radius: 25px; /* 修改为25px圆角 */
            padding: 0 20px; /* 增加内边距，使内容居中 */
            display: flex;
            align-items: center;
            transition: all 0.3s;
            height: 50px; /* 增加高度，提升点击体验 */
        }
        
        .input-group i {
            color: #666;
            margin-right: 15px; /* 增加图标间距 */
            font-size: 1.1rem; /* 增大图标尺寸 */
        }
        
        .input-group input {
            flex: 1;
            height: 100%;
            border: none;
            outline: none;
            background: transparent;
            font-size: 1rem; /* 增大字体尺寸 */
        }
        
        .error-message {
            color: #ff6b6b;
            font-size: 0.9rem;
            margin-top: -15px;
            margin-bottom: 15px;
            text-align: left;
            padding-left: 20px;
            display: none;
        }
        
        /* 圆角按钮样式 */
        .login-btn {
            width: 100%;
            padding: 12px;
            background-color: #4ecdc4;
            color: white;
            border: none;
            border-radius: 25px; /* 按钮也使用相同的圆角 */
            font-size: 1rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 4px 15px rgba(78, 205, 196, 0.2);
        }
        
        .login-btn:hover {
            background-color: #3aa9a1;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(78, 205, 196, 0.3);
        }
        
        .login-btn:disabled {
            background-color: #9ed9d5;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }
        
        /* Toast 样式 */
        .toast {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            padding: 12px 20px;
            border-radius: 25px; /* 圆角Toast */
            color: white;
            font-size: 0.9rem;
            z-index: 100;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            opacity: 0;
            animation: fadeIn 0.3s forwards;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translate(-50%, 20px); }
            to { opacity: 1; transform: translate(-50%, 0); }
        }
        
        @keyframes fadeOut {
            from { opacity: 1; transform: translate(-50%, 0); }
            to { opacity: 0; transform: translate(-50%, 20px); }
        }
        
        .toast-success { background-color: #4ecdc4; }
        .toast-error { background-color: #ff6b6b; }
        
        /* 圆角弹窗按钮 */
        .close-modal {
            display: inline-block;
            padding: 8px 15px;
            background-color: #4ecdc4;
            color: white;
            border-radius: 25px; /* 圆角按钮 */
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        .close-modal:hover {
            background-color: #3aa9a1;
        }
        
        /* 圆角二维码弹窗 */
        .modal-content {
            background-color: white;
            padding: 20px;
            border-radius: 25px; /* 圆角弹窗 */
            text-align: center;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }
    </style>
</head>
<body>
    <!-- 服务器信息显示 -->
    <div class="server-info">
        <div>服务器状态: <span class="online">●</span> 在线</div>
        <div>访问地址: <span class="ip" id="serverIp">加载中...</span></div>
    </div>
    
    <!-- 初始启动图片 -->
    <div class="splash-screen" id="splashScreen"></div>
    
    <!-- 登录界面 -->
    <div class="login-container" id="loginContainer">
        <div class="login-header">
            <h1>充电管理登录</h1>
            <p>查看您的设备充电情况</p>
        </div>
        
        <form id="loginForm", method="POST">
            <div class="input-group" id="usernameGroup">
                <i class="fas fa-user"></i>
                <input type="text" id="username" placeholder="请输入账号" required>
            </div>
            <div class="error-message" id="usernameError">账号密码错误</div>
            
            <div class="input-group">
                <i class="fas fa-lock"></i>
                <input type="password" id="password" placeholder="请输入密码" required>
            </div>
            
            <button type="submit" class="login-btn">登 录</button>
        </form>
        
        <div class="additional-links">
            <a href="reset_password.html" id="forgotPasswordLink"><i class="fas fa-key"></i> 忘记密码?</a>
            <a href="register.html" id="registerLink"><i class="fas fa-user-plus"></i> 注册新账号</a>
        </div>
    </div>

    <script>
        // Toast 通知函数
        const createToast = (message, type = 'success') => {
            const toast = document.createElement('div');
            toast.className = `toast toast-${type}`;
            toast.textContent = message;
            document.body.appendChild(toast);
            
            setTimeout(() => {
                toast.style.animation = 'fadeOut 0.3s forwards';
                setTimeout(() => {
                    document.body.removeChild(toast);
                }, 300);
            }, 3000);
        };
        
        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            const splashScreen = document.getElementById('splashScreen');
            const loginContainer = document.getElementById('loginContainer');
            const loginForm = document.getElementById('loginForm');
            const serverIp = document.getElementById('serverIp');
            const usernameGroup = document.getElementById('usernameGroup');
            const usernameError = document.getElementById('usernameError');
            
            // 显示服务器IP
            serverIp.textContent = window.location.host;
            
            // 3秒后隐藏启动图片并显示登录框
            setTimeout(() => {
                splashScreen.style.opacity = '0';
                setTimeout(() => {
                    splashScreen.style.display = 'none';
                    loginContainer.classList.add('show');
                }, 1000);
            }, 3000);
                        
            // 处理登录表单提交
            loginForm.addEventListener('submit', function(e) {
                e.preventDefault();
                
                // 清除之前的错误状态
                usernameGroup.classList.remove('error');
                usernameError.style.display = 'none';
                
                const username = document.getElementById('username').value;
                const password = document.getElementById('password').value;
                
                // 简单验证
                if (username && password) {
                    // 显示加载效果
                    const loginBtn = loginForm.querySelector('.login-btn');
                    loginBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 登录中...';
                    loginBtn.disabled = true;
                    
                    // 发送登录请求到服务器
                    fetch('http://49.235.120.243:8083/api/login', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({
                            username: username,
                            password: password
                        })
                    })
                    .then(response => {
                        // 调试：打印响应状态和头部
                        console.log('响应状态:', response.status);
                        console.log('响应头部:', response.headers);
                        
                        // 检查响应状态
                        if (!response.ok) {
                            throw new Error(`HTTP错误: ${response.status}`);
                        }
                        
                        // 解析响应体为JSON
                        return response.json();
                    })
                    .then(data => {
                        // 调试：打印服务器返回的数据
                        console.log('服务器响应数据:', data);
                        
                        // 重置按钮状态
                        loginBtn.innerHTML = '登 录';
                        loginBtn.disabled = false;
                        
                        if (data.success) {
                            // 1. 登录成功：保存用户信息并跳转
                            const userInfo = {
                                id: data.data.id,
                                expires: Date.now() + data.expire * 1000
                            };
                            localStorage.setItem('userInfo', JSON.stringify(userInfo));
                            
                            // 3. 显示成功提示
                            createToast('登录成功，正在跳转...');
                            
                            // 4. 跳转到用户界面
                            setTimeout(() => {
                                window.location.href = 'login.html';
                            }, 1000);
                        } else {
                            // 登录失败：显示错误信息
                            console.error('登录失败:', data.message);
                            
                            // 显示错误提示
                            usernameGroup.classList.add('error');
                            usernameError.textContent = data.message || '账号或密码错误，请重新输入';
                            usernameError.style.display = 'block';
                            
                            // 添加错误动画效果（抖动）
                            usernameGroup.classList.add('shake');
                            setTimeout(() => {
                                usernameGroup.classList.remove('shake');
                            }, 500);
                            
                            // 额外优化：自动聚焦到用户名输入框
                            document.getElementById('username').focus();
                            
                            // 同时显示toast提示
                            createToast(data.message || '登录失败', 'error');
                        }
                    })
                    .catch(error => {
                        // 网络错误处理
                        loginBtn.innerHTML = '登 录';
                        loginBtn.disabled = false;
                        createToast('登录请求失败，请检查网络连接', 'error');
                        console.error('登录请求错误:', error);
                    });
                } else {
                    createToast('请输入账号和密码！', 'error');
                }
            });
            
            // 输入框交互效果
            const inputs = document.querySelectorAll('input');
            inputs.forEach(input => {
                input.addEventListener('focus', function() {
                    this.parentElement.classList.add('active');
                    // 清除错误状态
                    if (this.id === 'username') {
                        usernameGroup.classList.remove('error');
                        usernameError.style.display = 'none';
                    }
                    if (!this.value && this.placeholder) {
                        this.placeholder = '';
                    }
                });
                
                input.addEventListener('blur', function() {
                    if (!this.value && this.id === 'username') {
                        this.placeholder = '请输入账号';
                    } else if (!this.value && this.id === 'password') {
                        this.placeholder = '请输入密码';
                    }
                });
            });
        });
    </script>
</body>
</html>